#{extends 'Profile/profile.html' /}
#{set selected:'edit' /}
#{set mainId:'main-two-columns-left' /}

<div class="right" id="main-content">
    <form action="@{Profile.changeInfo()}" method="post">
    <p>
        #{field 'name'}
        <label for="${field.name}">User Name: </label><br />
        <input class="text" type="text" id="${field.name}" name="${field.name}" value="${currentUser?.name}" />
        #{/field}
    </p>
    <p>
        #{field 'email'}
        <label for="${field.name}">Email: </label><br />
        <input class="text" type="text" id="${field.name}" name="${field.name}" value="${currentUser?.email}" />
        #{/field}
    </p>
    <p>
        #{field 'desc'}
        <label for="${field.name}">Description: </label><br />
        <textarea id="${field.name}" name="${field.name}" cols="90" rows="10">${currentUser?.desc}</textarea>
        #{/field}
    </p>
    <p>
        <input class="button" type="submit" value="Save" />
        &nbsp&nbsp&nbsp;
        <input class="button" type="reset" value="Reset" />
    </p>
    </form>
</div>
<div class="left sidebar" id="sidebar">
    <!-- <img src="/public/images/profile/user_head.png" height="80px" width="80px" /> -->
    <img src="@{'/public/images/default_gravatar_small.png'}" />
    <script type="text/javascript">
    function changepicture() {
        alert('Sorry, this is demo only. Changing profile picture is not implemented.');
        return false;
    }
    </script>
    <p>
        <a href="#" onclick="changepicture()">Change picture</a>
    </p>
</div>
<div class="clearer">&nbsp;</div> 